<template>
	<view class="content">
		<view class="part1">
			<view class="my-order">
				<view class="sort navIndex==1?'activite': ''" @click="checkIndex(1)" >
					关注
				</view>
				<view class="sort navIndex==2?'activite': ''" @click="checkIndex(2)">
					推荐
				</view>
				<view class="sort navIndex==3?'activite': ''" @click="checkIndex(3)">
					同城
				</view>
			</view>
		</view>
		<view class="part2">
			<view class="content" v-if="navIndex==1">
				<!-- 关注搜索框 -->
				<navigator url="search/search">
					<view class="top-search">
						<view class="search-right">
							<navigator url=""><input type="text" value="" placeholder="想要什么？" /></navigator>
						</view>
					</view>
				</navigator>
				<!-- 关注内容 -->
				<view class="attention">
					<view class="attention-content" @click="goLoin" v-for="(item3, id) in attention" :key="id">
						<view class="attention-content-title">
							<view class="attention-content-title-img">
									<image :src="item3.image1" mode=""></image>
							</view>
							<view class="attention-content-title-name">
								<view class="attention-content-title-name1">
									{{item3.name}}
								</view>
								<view class="attention-content-title-name2">
									{{item3.order}}
								</view>
							</view>
						</view>
						<view class="attention-content-imgs">
							<view class="attention-content-imgs1">
								<image :src="item3.imgs1" mode=""></image>
							</view>
							<view class="attention-content-imgs1">
								<image :src="item3.imgs1" mode=""></image>
							</view>
							<view class="attention-content-imgs1">
								<image :src="item3.imgs1" mode=""></image>
							</view>
						</view>
						<view class="attention-content-jia">
							<view class="attention-content-jia1">{{item3.ordermoney}}</view>
							<view class="attention-content-jia1">{{item3.ordermoney}}</view>
							<view class="attention-content-jia1">{{item3.ordermoney}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<!-- 搜索框 -->
				<navigator url="search/search">
					<view class="top-search">
						<view class="search-right">
							<navigator url=""><input type="text" value="" placeholder="想要什么？" /></navigator>
						</view>
					</view>
				</navigator>
			<!-- <van-search v-model="value" placeholder="请输入搜索关键词" /> -->
			
				 <!-- banner -->
				 <view class="banner"></view>
				 <!-- 商品 -->
				 <view class="mall">
				 	<view class="mall-title">这里是专题名称
					<uni-icons type="arrowright" size="15" margin-left="14rpx"></uni-icons>
					</view>
					
						<view class="mall-content" @click="goCommodity" v-for="(item, id) in names" :key="id">
							<view class="content-left">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="content-right">
								<view class="container--right-top">
									{{item.title}}
									<view class="container--right-middle">
										{{item.middle}}
									</view>
								</view>
								<view class="content-right-bottom">
									{{item.money}}
								</view>
							</view>
						</view>
				 </view>
				 <!-- 商品 -->
			<view class="mall">
				<view class="mall-title">置换闲置物品首选
								<uni-icons type="arrowright" size="15" margin-left="14rpx"></uni-icons>
								</view>
								
									<view class="mall-content" @click="goCommodity" v-for="(item, id) in names" :key="id">
										<view class="content-left">
											<image :src="item.image" mode=""></image>
										</view>
										<view class="content-right">
											<view class="container--right-top">
												{{item.title}}
												<view class="container--right-middle">
													{{item.middle}}
												</view>
											</view>
											<view class="content-right-bottom">
												{{item.money}}
											</view>
										</view>
									</view>
			</view>
				 <!-- 分类 -->
				 	<view class="classify-title">
						 <view class="classify-title2">推荐</view>
						  <view class="classify-title1">皮草</view>
						   <view class="classify-title1">模型</view>
						    <view class="classify-title1">Cosplay</view>
							 <view class="classify-title1">手办</view>
				 	</view>
				 <view class="classify">
				 	<view class="classify-content" v-for="(item2, id) in commodity" :key='id'>
				 		<view class="classify-content-img">
				 			<image :src="item2.image" mode=""></image>
				 		</view>
				 		<view class="classify-content-name">
				 			{{item2.title}}
				 		</view>
				 		<view class="classify-content-jia">
				 			{{item2.money}}
				 		</view>
				 		<view class="classify-content-yh">
				 			<view class="classify-content-yh1">
				 				<image :src="item2.userimage" mode=""></image>
				 			</view>
				 			<view class="">
				 				{{item2.user}}
				 			</view>
				 		</view>
				 	</view>
				 
				 </view>
			</view>
			<view class="content" v-if="navIndex==3">
				<!-- 搜索框 -->
				<navigator url="search/search">
					<view class="top-search">
						<view class="search-right">
							<navigator url=""><input type="text" value="" placeholder="想要什么？" /></navigator>
						</view>
					</view>
				</navigator>
				<!-- banner -->
					<view class="local-banner" @click="goGoods">
					<image src="../../static/home/tc-imgs1.png" mode=""></image>
					</view>
				<!-- 分类 -->
					<view class="classify-title">
										 <view class="classify-title2">推荐</view>
										  <view class="classify-title1">皮草</view>
										   <view class="classify-title1">模型</view>
										    <view class="classify-title1">Cosplay</view>
											 <view class="classify-title1">手办</view>
					</view>
				<view class="classify">
					<view class="classify-content" v-for="(item2, id) in commodity" :key='id'>
						<view class="classify-content-img">
							<image :src="item2.image" mode=""></image>
						</view>
						<view class="classify-content-name">
							{{item2.title}}
						</view>
						<view class="classify-content-jia">
							{{item2.money}}
						</view>
						<view class="classify-content-yh">
							<view class="classify-content-yh1">
								<image :src="item2.userimage" mode=""></image>
							</view>
							<view class="">
								{{item2.user}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import vanSearch from '../../wxcomponents/vant/search/index.js'
	import { Toast } from 'vant';
	export default {
		data() {
			
			return {
				value: '',
				navIndex:2,
				// names: [
				// 	{
				// 	'id': '0',
				// 	'title': '这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题',
				// 	'middle': '商品分类',
				// 	image: '../../static/home-imgs1.png',
				// 	'money': '￥ 2839.92'
				// },
				// {
				// 	'id': '1',
				// 	'title': '这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题',
				// 	'middle': '商品分类2',
				// 	image: '../../static/home-imgs1.png',
				// 	'money': '￥ 2839.92'
				// }
				// ],
				// commodity: [
				// 	{
				// 		'id': '0',
				// 		'title': '1这里是商品标题这里是商品标题这里是商品标题...',
				// 		image: '../../static/home/home-imgs1.png',
				// 		userimage: '../../static/mall/mall8.png',
				// 		'money': '￥2839.92',
				// 		'user': '这里用户名'
				// 	},
				// 	{
				// 		'id': '1',
				// 		'title': '2这里是商品标题这里是商品标题这里是商品标题...',
				// 		image: '../../static/home/home-imgs1.png',
				// 		userimage: '../../static/mall/mall8.png',
				// 		'money': '￥2839.92',
				// 		'user': '这里用户名'
				// 	},{
				// 		'id': '2',
				// 		'title': '3这里是商品标题这里是商品标题这里是商品标题...',
				// 		image: '../../static/home/home-imgs1.png',
				// 		userimage: '../../static/mall/mall8.png',
				// 		'money': '￥2839.92',
				// 		'user': '这里用户名'
				// 	},
				// 	{
				// 		'id': '3',
				// 		'title': '4这里是商品标题这里是商品标题这里是商品标题...',
				// 		image: '../../static/home/home-imgs1.png',
				// 		userimage: '../../static/mall/mall8.png',
				// 		'money': '￥2839.92',
				// 		'user': '这里用户名'
				// 	}
				// ],
				// attention:[
				// 	{
				// 		'id': '0',
				// 		image1: '../../static/home/gz-imgs1.png',
				// 		'name': '驴打滚1',
				// 		'order': '18.2w粉丝',
				// 		'imgs1': '../../static/home/gz-imgs2.png',
				// 		'ordermoney': '￥2839.92'
				// 	},
				// 	{
				// 		'id': '1',
				// 		image1: '../../static/home/gz-imgs1.png',
				// 		'name': '山东碉堡建设制造二分厂2',
				// 		'order': '18.2w粉丝',
				// 		'imgs1': '../../static/home/gz-imgs2.png',
				// 		'ordermoney': '￥2839.92'
				// 	},
				// 	{
				// 		'id': '2',
				// 		image1: '../../static/home/ss-imgs6.png',
				// 		'name': '驴打滚3',
				// 		'order': '18.2w粉丝',
				// 		'imgs1': '../../static/home/gz-imgs2.png',
				// 		'ordermoney': '￥2839.92'
				// 	},
				// 	]
			};
		},
		onShow() {
			console.log('---------1111')
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index
			},
			goLoin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			goGoods() {
				uni.navigateTo({
					url: 'specific/goods'
				})
			},
			goCommodity() {
				uni.navigateTo({
					url: '../commodity-details/commodity-details'
				})
			},
			onSearch(val) {
			      Toast(val);
			    },
			    onCancel() {
			      Toast('取消');
			    },
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		.top-search {
			margin: 18rpx 25rpx;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
		
		
			.search-right {
				background: #f5f5f5 url('../../static/search.png') no-repeat 25rpx 25rpx;
				font-size: 25rpx;
				background-size: 25rpx 25rpx;
				width: 100%;
				height: 72rpx;
				border: 1px solid #fcda22;
				border-radius: 36rpx;
		
				input {
					text-align: left;
					margin-left: 20%;
					margin-top: 8rpx;
				}
			}
		}
		// 切换tab栏
		.part1 {
			width: 679rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.my-order {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
		}
		// banner
		.banner {
			width: 699rpx;
			margin: 21rpx 25rpx;
			height: 293rpx;
			border-radius: 16rpx;
			background-color: #eaeaea;
			
		}
		// 商品内容
		.mall {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin:25rpx 25rpx;
			.mall-title {
				font-size: 28rpx;
				font-weight: 600;
				margin: 0 0 18rpx 0;
				
			}
			.mall-content {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 18rpx;
				margin-bottom: 18rpx;
				margin-right: 25rpx;
				.content-left {
					width: 231rpx;
					height: 231rpx;
					background-color: #eaeaea;
					border-radius: 14rpx;
					image {
						max-width: 100%;
						max-height: 100%;
					}
				}
				.content-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 28rpx;
					margin-right: 25rpx;
					.container--right-top {
						font-size: 25rpx;
						font-weight: Medium;
					}
					.container--right-middle {
						margin-top: 14rpx;
						font-size: 18rpx;
						color: #21202d;
					}
					.content-right-bottom {
						font-size: 25rpx;
						color: #eb3e3e;
						font-weight: Medium;
					}
				}
			}
		}
		// 分类
		
			.classify-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 19rpx 24rpx;
				.classify-title1, .classify-title2 {
					font-size: 21rpx;
					color: #21201d;
					padding: 9rpx 27rpx;
					background-color: #F5F5F5;
					line-height: 50rpx;
					align-items: center;
					border-radius: 27rpx;
			}
			.classify-title2 {
				background-color: #fcca22;
			}
			}
		
		// 分类内容
		.classify {
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 18rpx 25rpx;
			.classify-content {
				width: 333rpx;
				margin-top: 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.classify-content-img {
					width: 333rpx;
					height: 333rpx;
					image {
						max-width: 100%;
						height: 100%;
						
					}
				}
				.classify-content-name {
					margin: 18rpx;
					font-size: 25rpx;
					font-weight: Medium;
					
				}
				.classify-content-jia {
					margin: 18rpx;
					font-size: 25rpx;
					color: #eb3e3e;
				}
				.classify-content-yh {
					display: flex;
					flex-direction: row;
					justify-content: left;
					font-size: 18rpx;
					color: #20212d;
					.classify-content-yh1 {
						margin-right: 14rpx;
						width: 36rpx;
						height: 36rpx;
						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
			}
		}
	
	}
	
	// 关注页面
	.attention {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.attention-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.attention-content-title {
				display: flex;
				flex-direction: row;
				justify-content: left;
				margin: 25rpx 18rpx 21rpx 25rpx;
				.attention-content-title-img {
					width: 79rpx;
					height: 79rpx;
					margin-right: 18rpx;
					image {
						max-width: 100%;
						max-height: 100%;
					}
				}
				.attention-content-title-name {
					flex-direction: column;
					.attention-content-title-name1 {
						font-size: 25rpx;
						color: #21202d;
						font-weight: 600;
					}
					.attention-content-title-name2 {
						margin-top: 12rpx;
						font-size: 21rpx;
						color: #949494;
					}
				}
			}
			.attention-content-imgs {
				margin: 21rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				.attention-content-imgs1 {
					width: 221rpx;
					height: 221rpx;
					flex-wrap: wrap;
					image {
						max-width: 100%;
						max-height: 100%;
						
							}
				}
			}
			.attention-content-jia {
				margin: 4rpx 25rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.attention-content-jia1 {
					margin-right: 124rpx;
					font-size:25rpx;
					color: #eb3e3e;
					font-weight: 600;
				}
			}
		}
	}
	// 同城内容
	.local-banner {
		width: 100%;
		height: 188rpx;
		margin: 39rpx 55rpx 63rpx 55rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// margin: 83rpx 25rpx;
		
		image {
			max-width: 100%;
			max-height: 100%;
			border-radius: 14rpx;
			
		}
	}
			.local-title {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				width: 722rpx;
				height: 90rpx;
				.local-title1 {
					width: 97rpx;
					height: 50rpx;
					font-size: 21rpx;
					align-items: center;
					border-radius: 36rpx;
					background-color: #e5e5e5;
					text-align: center;
				}
			.local-title2 {
				width: 97rpx;
				height: 50rpx;
				font-size: 21rpx;
				align-items: center;
				border-radius: 36rpx;
				background-color: #fcca22;
				text-align: center;
			
			}
			
			}
</style>
